<template>
  <div
    class="app-container"
    style="background-color: transparent;
    width: 92%;
    border-radius: 5px;
    height: 95%;
    margin: 20px auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;"
  >
    <el-alert
      v-if="failMessage != ''"
      :title="failMessage"
      type="error"
    />
    <div class="monitor-box">
      <div v-for="(item,index) in courtStatusList" :key="index" class="monitor-item" @click="jumpToDisplayPage(item)">
        <div class="monitor-item-inner-box">
          <div class="video-box">
            <videos :video-url="item.hostVideoUrl" :tribunal-code="item.tribunalCode" />
          </div>
          <div style="padding-left: 20px; padding-bottom: 20px;">
            <div class="title-box">
              {{ item.tribunalName }}
            </div>

            <div class="monitor-item-status">
              <div class="monitor-item-status-line">
                <div class="monitor-line-left">
                  <div class="status-title">
                    电源
                  </div>
                  <i v-if="item.equipmentState.power" class="el-icon-success status-icon" style="color: green" />
                  <i v-else class="el-icon-error status-icon" style="color: red" />
                </div>
                <div class="monitor-line-right">
                  <div class="status-title">
                    摄像机
                  </div>
                  <i v-if="item.equipmentState.camera" class="el-icon-success status-icon" style="color: green" />
                  <i v-else class="el-icon-error status-icon" style="color: red" />
                </div>

              </div>

              <div class="monitor-item-status-line">
                <div class="monitor-line-left">
                  <div class="status-title">
                    庭审主机
                  </div>
                  <i v-if="item.equipmentState.host" class="el-icon-success status-icon" style="color: green" />
                  <i v-else class="el-icon-error status-icon" style="color: red" />
                </div>
                <div class="monitor-line-right">
                  <div class="status-title">
                    话筒
                  </div>
                  <i v-if="item.equipmentState.audio" class="el-icon-success status-icon" style="color: green" />
                  <i v-else class="el-icon-error status-icon" style="color: red" />
                </div>

              </div>

              <div class="monitor-item-status-line">
                <div class="monitor-line-left">
                  <div class="status-title">
                    庭审电脑
                  </div>
                  <i v-if="item.equipmentState.computer" class="el-icon-success status-icon" style="color: green" />
                  <i v-else class="el-icon-error status-icon" style="color: red" />
                </div>
                <div class="monitor-line-right">
                  <!--                <div class="status-title">-->
                  <!--                  话筒-->
                  <!--                </div>-->
                  <!--                <i class="el-icon-error status-icon"  style="color: red"></i>-->
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import videos from './video'
import { selectTribunalMonitorStatus } from '@/api/tribunalMonitor'
export default {
  name: 'Monitor',
  components: {
    videos
  },
  data() {
    return {
      // courtCode: '1327B30',
      courtCode: '1329B32',
      failMessage: '',
      failMessageIndex: 0,
      equipmentFailMessages: [],
      courtStatusList: [
        {
          truibunalName: '温州中院第一人民法庭',
          tribunalCode: 1
        },
        {
          truibunalName: '温州中院第二人民法庭',
          tribunalCode: 2
        },
        {
          truibunalName: '温州中院第一人民法庭',
          tribunalCode: 1
        },
        {
          truibunalName: '温州中院第二人民法庭',
          tribunalCode: 2
        },
        {
          truibunalName: '温州中院第一人民法庭',
          tribunalCode: 1
        },
        {
          truibunalName: '温州中院第二人民法庭',
          tribunalCode: 2
        },
        {
          truibunalName: '温州中院第一人民法庭',
          tribunalCode: 1
        },
        {
          truibunalName: '温州中院第二人民法庭',
          tribunalCode: 2
        }, {
          truibunalName: '温州中院第一人民法庭',
          tribunalCode: 1
        },
        {
          truibunalName: '温州中院第二人民法庭',
          tribunalCode: 2
        }
      ]
    }
  },
  created() {
    this.getTribunalsMonitorStatusByCourtCode()
    setInterval(this.displayMessage, 3000)
    setInterval(this.getTribunalsMonitorStatusByCourtCode, 60000)
  },
  methods: {
    jumpToDisplayPage(tribunalEquipmentStatus) {
      const routeUrl = this.$router.resolve({ path: '/largeScreenDisplay',
        query: { tribunalCode: tribunalEquipmentStatus.tribunalCode }})
      window.open(routeUrl.href, '_blank')
      // this.$router.push({ path: '/largeScreenDisplay',
      //   query: { tribunalCode: tribunalEquipmentStatus.tribunalCode }})
    },
    displayMessage() {
      if (this.failMessageIndex >= this.equipmentFailMessages.length) {
        this.failMessageIndex = 0
      }
      if (this.equipmentFailMessages.length === 0) {
        this.failMessageIndex = 0
        this.failMessage = ''
        return
      }
      this.failMessage = this.equipmentFailMessages[this.failMessageIndex]
      this.failMessageIndex++
    },
    getTribunalsMonitorStatusByCourtCode() {
      const param = {
        courtCode: this.courtCode
      }
      selectTribunalMonitorStatus(param).then(res => {
        console.log(res)
        this.equipmentFailMessages = []
        const statusData = res.data
        for (let i = 0; i < statusData.length; i++) {
          const tribunal = statusData[i]
          const equipmentState = {
            power: true,
            camera: true,
            host: true,
            audio: true,
            computer: true
          }
          const tribunalEquipmentStatusList = tribunal.tribunalEquipmentStatusList
          for (let j = 0; j < tribunalEquipmentStatusList.length; j++) {
            if (tribunalEquipmentStatusList[j].equipmentType === 1) {
              equipmentState.power = tribunalEquipmentStatusList[j].status
              if (!equipmentState.power) {
                const failMsg = tribunal.tribunalName + '时序电源异常'
                this.equipmentFailMessages.push(failMsg)
              }
            } else if (tribunalEquipmentStatusList[j].equipmentType === 2) {
              equipmentState.host = tribunalEquipmentStatusList[j].status
              if (!equipmentState.host) {
                const failMsg = tribunal.tribunalName + '庭审主机异常'
                this.equipmentFailMessages.push(failMsg)
              }
            } else if (tribunalEquipmentStatusList[j].equipmentType === 3) {
              equipmentState.camera = tribunalEquipmentStatusList[j].status
              if (!equipmentState.camera) {
                const failMsg = tribunal.tribunalName + '法庭摄像机异常'
                this.equipmentFailMessages.push(failMsg)
              }
            } else if (tribunalEquipmentStatusList[j].equipmentType === 4) {
              equipmentState.audio = tribunalEquipmentStatusList[j].status
              if (!equipmentState.audio) {
                const failMsg = tribunal.tribunalName + '音频系统异常'
                this.equipmentFailMessages.push(failMsg)
              }
            } else if (tribunalEquipmentStatusList[j].equipmentType === 5) {
              equipmentState.computer = tribunalEquipmentStatusList[j].status
              if (!equipmentState.computer) {
                const failMsg = tribunal.tribunalName + '庭审电脑异常'
                this.equipmentFailMessages.push(failMsg)
              }
            }
          }
          statusData[i].equipmentState = equipmentState
        }
        this.courtStatusList = statusData
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.status-title{
  flex: 1;
}
.status-icon{
  flex: 1;
}
.monitor-line-left{
  display: flex;
  flex-direction: row;
  flex: 1;
}
.monitor-line-right{
  display: flex;
  flex-direction: row;
  flex: 1;
}
.monitor-item-status-line{
  display: flex;
  flex-direction: row;
  padding-bottom: 5px;
}
.video-box{
  height:  230px;
}
.title-box{
  color: #ffffff;
  font-size: 24px;
  padding-bottom: 5px;
}
.monitor-item-status{
  color: white;
}
.monitor-item{
  width: 380px;
  //height: 335px;
  padding: 10px;
  margin-top: 30px;
  display: flex;
  cursor: pointer;
  flex-direction: column;
}
.monitor-item-inner-box{
  display: flex;
  flex-direction: column;
  background-color: #000000;
}
.monitor-box{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.btn{
  width: 10px;
  height: 10px;
  background-image: url("../../assets/imgs/u749.png");
}
::v-deep .el-input__inner {
  height: 32px;
}
</style>
